<template>
  <div class="continer">
    <!-- 头像信息 -->
    <div class="top">
      <div class="headBox">
        <img class="head" src="@/assets/images/test3.jpg" alt="">
        <img class="sex" src="@/assets/images/sex.jpg" alt="">
      </div>
      <div class="right">
        <span class="nameTxt">十五地方</span>
        <span class="vipTxt">东易日盛集团VIP客户</span>
      </div>
    </div>
    <!-- 位置 -->
    <div class="locBox">
      <img class="locImg" src="@/assets/images/loc.png" alt="">
      <span>北京市朝阳区和平里东土城路</span>
    </div>
    <!-- lab -->
    <div class="labBox">
      <router-link class="labList" :to="{path: '/family/schedule',query: {test: 666}}" tag="div">
        <span class="redBlock"></span>
        <span class="titleTxt">我家</span>
        <span class="titleTxt2">家居装饰</span>
        <img class="index_icon" src="@/assets/images/index_icon1.png" alt="">
      </router-link>

      <router-link class="labList" :to="{path: '/views/serviceStaff',query: {test: 666}}" tag="div">
        <span class="redBlock"></span>
        <span class="titleTxt">设计</span>
        <span class="titleTxt2">服务团队</span>
        <img class="index_icon" src="@/assets/images/index_icon2.png" alt="">
      </router-link>

      <router-link class="labList" :to="{path: '/construction/implimentation',query: {test: 666}}" tag="div">
        <span class="redBlock"></span>
        <span class="titleTxt">工地</span>
        <span class="titleTxt2">在施工地</span>
        <img class="index_icon" src="@/assets/images/index_icon3.png" alt="">
      </router-link>
    </div>

    <div class="labBox">
      <router-link class="labList" :to="{path: '/views/neighbouring',query: {test: 666}}" tag="div">
        <span class="redBlock"></span>
        <span class="titleTxt">体验</span>
        <span class="titleTxt2">到店体验</span>
        <img class="index_icon" src="@/assets/images/index_icon4.png" alt="">
      </router-link>
      <router-link class="labList" :to="{path: '/Decorate',query: {test: 666}}" tag="div">
          <span class="redBlock"></span>
          <span class="titleTxt">装修</span>
          <span class="titleTxt2">我要装修</span>
          <img class="index_icon" src="@/assets/images/index_icon5.png" alt="">
      </router-link>
      <router-link class="labList" :to="{path:'../views/message'}" tag="div">
        <span class="redBlock"></span>
        <span class="titleTxt">消息</span>
        <span class="titleTxt2">消息提醒</span>
        <img class="index_icon" src="@/assets/images/index_icon6.png" alt=""> 
      </router-link>
    </div>
    <!-- 弹窗 -->
    <div class="popBox" v-if="popStatus" v-cloak>
      <div class="popSec">
        <img class="popbtn" src="@/assets/images/popbtn.png" alt="" @click="popClose">
        <span class="popTxt1">欢迎进入<span>东易日盛装修管家</span></span>
        <p class="popTxt2">认证后可成为东易日盛<span>VIP客户，</span><br>享受专属服务，<span>领取更多优惠！</span><br>如您已签约东易日盛，<br>认证后可在线实时监控您家施工进度</p>
        <router-link class="popBtn2" :to="{path:'../views/userAuth'}" tag="span">去认证</router-link>
      </div>
    </div>
    <!-- 底部 -->
    <tabbar></tabbar>
  </div>
</template>
<script>

import Tabbar from './components/Tabbar'

export default {
  name: 'Home',
  components: {
    Tabbar
  },
  data () {
      return {
        popStatus:true,
        param : {
        　　callbackQuery: 'callback', // jsonp key //请求传递参数 1
        　　callbackName: 'jsonpCallback', // jsonp key //请求传递参数 2
            timestamp:Date.parse(new Date())/1000,
            token:this.$md5(this.$md5('dyrs_$&*2019')+ Date.parse(new Date())/1000)
        }
      }
  },
  created(){
    console.log(this.$md5('holle'))
    // this.$store.commit('setCode','6666');
    // this.$jsonp('http://cloud_2019.dyrs.com.cn/photo/company',this.param).then((res)=>{
    //   console.log(res)
    // })
    // 
    // console.log(this.$store.state.name)
    // this.axios.get('/api/exp/index?key=910e9fb91e0ccbe86d3cedb8998c7313&com=sf&no=SF1001129070722').then((response)=>{
    //             console.log(response.data)
    //         }).catch((response)=>{
    //             console.log(response)
    //         })
  },
  mounted() {
    
  },
  methods: {
    popClose(res){
      this.popStatus = !this.popStatus
    }
  }
}
</script>

<style lang="stylus" scoped>
.continer
  min-height 100vh
  display flex
  flex-direction column
  align-items center
  background url(../../assets/images/indexbg.jpg)
  background-size 100% auto
  background-repeat no-repeat
  .top
    width 628px
    display flex
    align-items center
    margin-bottom 60px
    .headBox
      width 198px
      height 198px
      box-sizing border-box
      border-radius 50%
      position relative
      margin-right 22px
      margin-left 10px
      margin-top 20px
      .head 
        width 180px
        height 180px
        border-radius 50%
        border 9px solid #625f61
      .sex
        width 50px
        height 50px
        border-radius 50%
        position absolute
        bottom 20px
        right 10px
    .right
      display flex
      flex-direction column
      justify-content center
      height 198px
      color #ffffff
      .nameTxt
        line-height 42px
        font-size 42px
        font-weight bold
        margin-bottom 18px
      .vipTxt
        line-height 24px
        font-size 24px
  .locBox
    width 628px
    display flex
    align-items center
    font-size 22px
    color #ededed
    margin-bottom 44px
    .locImg
      width 26px
      height 32px
      margin 0 6px 0 36px
  .labBox
    width 628px
    display flex
    align-items center
    justify-content space-between
    margin-bottom 28px
    .labList
      width 195px
      height 229px
      border-radius 10px
      background #e4e4e4
      display flex
      flex-direction column
      position relative
      .redBlock
        width 24px
        height 6px
        background #b00d15
        margin 20px 0 13px 151px
      .titleTxt
        line-height 30px
        font-size 30px
        color #333333
        font-weight bold
        letter-spacing 2px
        margin-left 30px
        margin-bottom 13px
      .titleTxt2
        line-height 24px
        font-size 24px
        color #666666
        margin-left 30px
      .index_icon
        width 69px
        height 58px
        position absolute
        bottom 20px
        right 20px
// 弹窗
.popBox
  width 100%
  height 100%
  position fixed
  left 0
  top 0
  background rgba(0,0,0,.6)
  display flex
  align-items center
  justify-content center
  .popSec
    width 560px
    height 560px
    border-radius 10px
    background #ffffff
    display flex
    align-items center
    justify-content center
    position relative
    flex-direction column
    .popbtn
      width 50px
      height 50px
      position absolute
      top 20px
      right 20px
    .popTxt1
      line-height 44px
      font-size 44px
      font-weight bold
      color #a9001
      margin-bottom 46px
      margin-top 30px
      span 
        font-size 30px
        color #333333
    .popTxt2
      line-height 42px
      font-size 22px
      color #333333
      text-align center
      span 
        font-weight bold
        color #a9001
    .popBtn2
      width 460px
      height 70px
      line-height 70px
      text-align center
      border-radius 10px
      background #a90017
      font-size 28px
      color #ffffff
      letter-spacing 4px
      margin-top 56px

</style>
